<template>
  <!-- 大div -->
  <div class="nav">
    <br />
    <br />

    <!-- div居中 -->
    <div class="navCenter">
      <!-- 表头 -->
      <div class="nav-top">
        <div :class="{ active: indexcolor == this.show }">
          <span class="el-icon-top" v-show="show" @click="sortda()">Rank</span>
          <span class="el-icon-bottom" v-show="!show" @click="sortxiao()"
            >Rank</span
          >
        </div>
      </div>
      <br />

      <!-- 侧边栏 -->
      <div class="nav-max">
        <div class="nav-left">
          <br />
          <b style="margin-left:2%">P R I C E :</b>
          <div>
            <br />
            <br />
            <br />
            <span v-for="(item, index) in arr" :key="index">
              <div
                @click="spancolor(index, item)"
                :class="{ activ: indextext == index }"
              >
                {{ item.title }}
              </div>
              <br />
              <br />
            </span>
          </div>
        </div>

        <!-- //具体内容 -->
        <div class="nav-center">
          <el-row :gutter="10">
            <div v-for="(item, index) in add" :key="index">
              <el-col :xs="24" :sm="12" :md="6" :lg="6">
                <div
                  class="grid-content bg-purple"
                  @click="bordercolor(index, item)"
                  :class="{ bordercolor: indexborder == index }"
                >
                  <div>
                    <img
                      :src="item.productImage"
                      width="100%"
                      style="border-radius: 1%;"
                      height="75%"
                      alt
                    />
                    <p style="width:100%;height:0.2rem"></p>
                    <b style="margin-left:2%">{{ item.productName }}</b>
                    <P style="color:red;margin-left:2%"
                      >￥{{ item.salePrice }}</P
                    >
                  </div>
                  <button class="colorgwc">进入详情页</button>
                </div>
              </el-col>
            </div>
          </el-row>
          <!-- 上拉加载 -->
          <div class="hidden_img" v-customShow="imgShow">
            <img
              width="20%"
              src="https://c-ssl.duitang.com/uploads/item/201805/01/20180501190142_hvbmr.thumb.1000_0.png"
              alt
            />
          </div>
          <div
            v-show="isshow"
            class="div_color"
            style="text-align:center;color:black;font-size:20px"
          >
            <span>已经到底了</span>
          </div>
          <br />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      add: [],
      arr: [],
      lts: [],
      currentlist: [],
      indexcolor: true,
      show: true,
      indextext: 0,
      indexborder: -1,
      imgShow: false,
      lv: 2,
      isshow: false,
    }
  },
  created() {
    let lts = localStorage.lts
    if (lts) {
      this.lts = JSON.parse(lts)
    }
  },

  methods: {
    spancolor(index, item) {
      this.indextext = index

      // console.log(this.indextext);

      this.add = []
      console.log(item)
      this.currentlist.forEach((ele) => {
        if (item.low < ele.salePrice && item.hight >= ele.salePrice) {
          this.add.push(ele)
        }
      })
      //  this.add=[],
    },
    bordercolor(index, item) {
      this.$router.push({
        path: './home',
        query: {
          item,
        },
      })

      // this.indexborder = index;
      // var rel = false;
      // this.lts.map((lts) => {
      //   if (lts._id == item._id) {
      //     rel = true;
      //     item.num++;
      //   }
      // });
      // if (!rel) {
      //   item.num = 1;
      //   this.lts.push(item);
      // }
      // localStorage.lts = JSON.stringify(this.lts);
    },
    sortda() {
      if ((this.show = this.show)) {
        this.show = false
      } else {
        this.show = true
      }
      this.add.sort((a, b) => {
        return a.salePrice - b.salePrice
      })
    },
    sortxiao() {
      if ((this.show = this.show)) {
        this.show = false
      } else {
        this.show = true
      }
      this.add.sort((a, b) => {
        return b.salePrice - a.salePrice
      })
    },
  },
  // 自定义指令
  directives: {
    customShow: {
      //自定义指令的名字
      bind() {},
      // 只有在插入时候触发 只用一次  更新不会触发  我们每次会改变ture false 所以要在更新时写一遍
      inserted(el, binding) {
        if (binding.value) {
          el.style.visibility = 'visible'
        } else {
          el.style.visibility = 'hidden'
        }
      },
      // true  false  更新的时触发
      update(el, binging) {
        // el 是获取到当前的元素   binging是当前元素的所有信息
        if (binging.value) {
          el.style.visibility = 'visible'
        } else {
          el.style.visibility = 'hidden'
        }
      },
    },
  },

  mounted() {
    this.$axios.get('http://localhost:8080/data.json').then((ret) => {
      console.log(ret.data.result.list)
      this.arr = ret.data.result.slider
      console.log(ret.data.result.slider)
      this.list = ret.data.result.list
      this.currentlist = ret.data.result.list
      this.list.sort((a, b) => {
        this.add = this.list
        return b.salePrice - a.salePrice
      })
    })
    // 实时获取 滚动的距离
    window.addEventListener('scroll', () => {
      /* 计算滑动到底部 整个文档的高度  = 可视区域高度 + 滚动的距离*/
      //获取滚动的距离
      let scrollHeight = document.documentElement.scrollTop
      //获取整个文档的高度
      let docHeight = document.documentElement.scrollHeight
      //可视区域高度
      let seeHeight = document.documentElement.clientHeight
      // 整个文档的高度 -  可视区域高度 - 滚动的距离 === 0 时候 说明 到底部了
      if (docHeight - seeHeight - scrollHeight < 1) {
        //loading加载出现
        this.imgShow = true
        //计时器  3秒后loading隐藏 数据请求回来加入数组
        window.setTimeout(() => {
          console.log('达到最底部')
          //我们的json数据只到 3  所以在这里判断一下
          if (this.lv === 4) {
            this.isshow = true
            this.imgShow = false
            return
          }
          //loading 隐藏
          this.imgShow = false
          //axios请求 json
          this.$axios
            .get(`http://localhost:8080/data${this.lv}.json`, {
              params: {},
            })
            .then((ret) => {
              console.log(ret.data.result.list)
              this.add = [...this.add, ...ret.data.result.list]
            })
          this.lv++
        }, 2000)
      }
      /*      console.log(scrollHeight + '滚动距离')
                console.log(docHeight + '文档高度')
                console.log(seeHeight + '可视') */
    })
  },
}
</script>

<style scoped>
.div_color span:hover {
  border-bottom: 2px solid red;
}
.hidden_img {
  width: 100%;
  display: flex;
  justify-content: center;
}
.bordercolor {
  box-shadow: 0px 0px 0px 2px rgb(190, 146, 0);
}
.colorgwc {
  outline: none;
  width: 100%;
  height: 20%;
  border: none;
  background: rgb(255, 255, 255);
  color: rgb(190, 146, 0);
  font-weight: 700;
}
.activ {
  color: rgb(190, 146, 0);
  border-left: 2px solid rgb(190, 146, 0);
  padding-left: 8%;
}
.active {
  color: rgb(190, 146, 0);
}
* {
  font-size: 0.15rem;
}
.nav-center {
  width: 74.75%;
  height: 100%;

  float: left;
}
.nav-max {
  width: 100%;
  height: 100vh;

  float: left;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple div {
  width: 100%;
  height: 80%;
  border-bottom: 2px solid white;
}
.bg-purple {
  height: 60vh;
  width: 100%;
  border: 2px solid white;
  margin-top: 3%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.nav-left div p {
  color: #666;
}

.nav-left {
  float: left;
  width: 25%;
  height: 73vh;
}
.nav-top div {
  text-align: right;
  margin-right: 5%;
  cursor: pointer;
  -webkit-user-select: none;
}
.nav {
  height: 86vh;
  background: rgba(95, 162, 211, 0);
}
.nav-top {
  width: 100%;
  height: 8vh;
  line-height: 8vh;
  background: rgb(252, 252, 252);
}
.navCenter {
  width: 90%;
  margin: 0 auto;
  height: 80vh;
}
</style>
